<%@page import="java.util.*,hyper.market.beans.*,java.io.*"%>
<%@page contentType="text/html"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%--
    Document   : viewStores
    Created on : Aug 25, 2011, 2:17:10 PM
    Author     : Mikeno
--%>

<jsp:useBean id="staffList" class="java.util.ArrayList" scope="session"/>
<link rel="stylesheet" href="style/desk.css" type="text/css" />
<script src="scripts/jquery-1.6.4.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <style type="text/css">

            #newtable{
                border:2px solid #999;
                font-family:verdana,arial,helvetica,sans-serif;
                font-size:18px;
                margin:auto;
            }
            #newtable td{
                width:50px;
                line-height:50px;
                border:1px solid #000;
                text-align:center;
            }
        </style>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View Store Details</title>
        <script type = "text/javascript">

            var modalWindow = {
                parent:"body",
                windowId:null,
                content:null,
                width:null,
                height:null,
                close:function()
                {
                    $(".modal-window").remove();
                    $(".modal-overlay").remove();
                },
                open:function()
                {
                    var modal = "";
                    modal += "<div class=\"modal-overlay\"></div>";
                    modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
                    modal += this.content;
                    modal += "</div>";

                    $(this.parent).append(modal);

                    $(".modal-window").append("<a class=\"close-window\"></a>");
                    $(".close-window").click(function(){modalWindow.close();});
                    $(".modal-overlay").click(function(){modalWindow.close();});
                }
            };
            var openMyModal = function(source)
            {
                modalWindow.windowId = "myModal";
                modalWindow.width = 470;
                modalWindow.height = 350;
                modalWindow.content = "<iframe width='470' height='350' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>";
                modalWindow.open();
            };

            function initRequest() {
                if (window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    isIE = true;
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }

            function searchResult() {
                if (document.getElementById("search").value === "") {
                    clearTable();
                } else {
                    var url = "/HyperMarket/searchStockServlet?stock=" + document.getElementById("search").value;
                    var req = initRequest();
                    req.onreadystatechange = function() {
                        if (req.readyState == 4) {
                            if (req.status == 200) {
                                parseMessages(req.responseXML);
                            } else if (req.status == 204){
                                clearTable();
                            }
                        }
                    };
                    req.open("POST", url, true);
                    req.send(null);
                }
            }


            function parseMessages(responseXML) {
                
                clearTable();
                var itemPerPage = 2;
                var counter = 0;
                var stocks = responseXML.getElementsByTagName("stocks")[0];
                var pages = Math.ceil(stocks.childNodes.length/itemPerPage)
                var stockDetails,temp = "";
                var list =new Array("id","stockName","image","costPrice","sellingPrice","quantity","threshold","status","discount","expiry");
                var valueList = new Array();
                for(var v = 0; v<pages; v++){  //highest lvl  append to this ul
                    var new_list = document.createElement('ul');
                    new_list.id= "baglist"+(counter+1);
                    if(counter == 0){
                        new_list.setAttribute("class","visible");  // first page is visible
                    }else{
                        new_list.setAttribute("class","hidden");   //thereafter is hidden   
                    }
                    for (var loop = 0; loop < itemPerPage; loop++) {  // this loop, takes everything.. therefore i need to divide
                        if(stocks.childNodes.length == ((counter*itemPerPage)+loop)){
                            break;
                        }
                        stockDetails = stocks.childNodes[(loop+(counter*itemPerPage))];
                        // retrieve continously
                        for(var k=0; k<list.length; k++){
                            temp = stockDetails.getElementsByTagName(list[k])[0];
                            valueList[k]=temp.childNodes[0].nodeValue;
                        }
                        var new_element = document.createElement('li');
                        new_element.setAttribute('id', valueList[0]);
                        new_element.setAttribute("class","listitem baglist");
                        new_element.innerHTML = "<label class=\"imgframe listbagimglink\" p=\"bagslist\" t=\"bagimage\">\n\
                        <img width=\"150\" height=\"93\" src=\"./product/"+ valueList[2]+"\" alt=\""+ valueList[2]+"\" class=\"listbagimg\"></label>\n\
                        <div class=\"listbagtext group\"><a href=\"#\" onclick=\"openMyModal('/HyperMarket/web_edit/editItemInformation.jsp?id="+valueList[0]+"&name="+valueList[1]+"&image="+valueList[2]+"&cost="+valueList[3]+"&selling="+valueList[4]+"&quantity="+valueList[5]+"&threshold="+valueList[6]+"&discount="+valueList[8]+"&expiry="+valueList[9]+"&storeid=<%=request.getSession().getAttribute("storeId")%>&status="+valueList[7]+"');return false;\" class=\"listbagitemtitle\">"+ valueList[1]+"</a>\n\
                        <p style=\"min-height: 63px;\" class=\"commenttext commenttextex\">Quantity : "+ valueList[5]+" &nbsp  Status : "+valueList[7]+"<br>Cost Price : $"+ valueList[3]+" &nbsp  Selling Price : $"+ valueList[4]+"<br>Threshold : "+ valueList[6]+" &nbsp Discount %: "+valueList[8]+" <br> Expiry Date : "+valueList[9]+" <br></p>\n\
                        <span class=\"listbaginfo\"><a href=\"#\" onclick=\"openMyModal('/HyperMarket/web_edit/editItemInformation.jsp?id="+valueList[0]+"&name="+valueList[1]+"&image="+valueList[2]+"&cost="+valueList[3]+"&selling="+valueList[4]+"&quantity="+valueList[5]+"&threshold="+valueList[6]+"&discount="+valueList[8]+"&expiry="+valueList[9]+"&storeid=<%=request.getSession().getAttribute("storeId")%>&status="+valueList[7]+"');return false;\">Edit Item Information</a> &nbsp;&nbsp; <a href=\"/bag/0207/comments\" p=\"bagslist\" t=\"comments\">View Sales Statistics</a></span></div></div>";
                        new_list.appendChild(new_element);
                    }

                    counter++;
                    document.getElementById("baglistdiv").appendChild(new_list);  // add into the div
                }
   
                // generate Pagination

                var new_pagination = document.createElement('ul');
                new_pagination.setAttribute("class", "noStyle PageSelector");
                for(var z=0; z<pages; z++){
                    var new_page = document.createElement('li');
                    if(z == 0){
                        //first page
                        new_page.setAttribute("class", "Active");
                        new_page.id = "page"+(z+1);
                        new_page.innerHTML = "<span>"+(z+1)+"</span>";
                    }else{
                        new_page.setAttribute("class", "Inactive");
                        new_page.id = "page"+(z+1);
                        new_page.innerHTML = "<a href=\"#\" onclick='changeVisibility("+(z+1)+");return false;'><span>"+(z+1)+"</span></a>";
                    }
                    new_pagination.appendChild(new_page);
                }
                document.getElementById("pageCategory").appendChild(new_pagination);

                
            }
            function clearTable(){
                //clear off the div
                document.getElementById("baglistdiv").innerHTML = "";
                document.getElementById("pageCategory").innerHTML = "";
            }

            function highlightall(ele){
                ele.select();
            }


            function changeVisibility(tableNum){
                //keeping track!
                var current = document.getElementById("currentpage").value;   
                document.getElementById("baglist"+current).className ="hidden";
                document.getElementById("baglist"+tableNum).className ="visible";
                document.getElementById("currentpage").value = tableNum;
                document.getElementById("page"+current).className = "Inactive";
                document.getElementById("page"+tableNum).className = "Active";
                document.getElementById("page"+current).innerHTML = "<a href=\"#\" onclick='changeVisibility("+(current)+");return false;'><span>"+(current)+"</span></a>";
                document.getElementById("page"+tableNum).innerHTML = "<span>"+(tableNum)+"</span>";

            }
      

        </script>
    </head>
    <body onload="searchResult()">
        <div class="header group">
            <div class="pagewidth">

                <ul class="headernav">
                    <li><a href="/HyperMarket/ViewStoresServlet"><img class="headerlogo" src="./arts/logo.png" width="106" height="22" alt="Bagcheck Home" border="0" /></a></li>
                    <li class="headerlink "><a p='header' t='home' href="/HyperMarket/ViewStoresServlet">Home</a></li>
                    <li class="headerlink headerlinkhl"><a p='header' t='about' href="#" onclick="return false;">View All Stores</a></li>
                    <li class="headerlink "><a p='header'  href="/HyperMarket/createStockServlet">Create Stocks</a></li>
                    <li class="headerlink "><a p='header'  href="/HyperMarket/EndOfDayServlet">End Of Day</a></li>
                    <li class="headerlink "><a p='header'  href="/HyperMarket/LogoutServlet">Logout</a></li>

                </ul>
            </div>
        </div>

        <div class="pagewidth alignleft group toppad topmargin">
            <img class="left toppad rightmargin" src="./arts/signup3_art_03262011.png" height="353" width="333" class="left" alt="Photo Gear">
            <div style="padding: 65px 0 0 360px;">
                <!-- Start News Box -->
                <table  style="width:100%"><tr>
                        <th><strong>Staff Id</strong></th>
                        <th><strong>Name</strong></th>
                        <th><strong>Role</strong></th>
                        <th><strong>Contact No.</strong></th>
                        <th><strong>Joined Date</strong></th></tr>

                    <tbody id="stafftable">
                        <%
                                    for (int count = 0; count < staffList.size(); count++) {
                                        if (((StaffBean) staffList.get(count)).getManager() == 1) {
                                            out.println(" <tr onmouseout='moutStream(this);' onmouseover='hovStream(this);' class='selected'>");
                                        } else {
                                            if (count % 2 != 1) {
                                                out.println("<tr onmouseout='moutStream(this);' onmouseover='hovStream(this);' class='light'> ");
                                            } else {
                                                out.println("<tr onmouseout='moutStream(this);' onmouseover='hovStream(this);' class='dark'> ");
                                            }

                                        }

                                        out.println(" <td class='staffid'>" + ((StaffBean) staffList.get(count)).getStaffid() + "</td>");
                                        out.println("<td class='name'>" + ((StaffBean) staffList.get(count)).getLoginName() + "</td>");
                                        out.println(" <td class='joined'>" + ((StaffBean) staffList.get(count)).getRole() + "</td>");
                                        out.println("<td class='name'>" + ((StaffBean) staffList.get(count)).getContact() + "</td>");
                                        out.println(" <td class='joined'>" + ((StaffBean) staffList.get(count)).getJoinedDate() + "</td>");
                                        out.println("</tr>");
                                    }
                        %>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="pagewidth alignleft group toppadstock topmarginstock">

            <div class ="pagewidth toppadless leftmargin heightstock">

                <ul class="homenavlist group botmargin heightstock">
                    <li><label class="homenavlistli">Stocks : <input type="text" size="20" id="search" name="id" onfocus="highlightall(this)" onkeyup="searchResult()" value="Search"></label></li>
                    <li><p></p></li>
                </ul>
            </div>
            <div id="baglistdiv" style="margin-top:50px">


            </div>
            <div id="pageCategory">

            </div>
        </div>

        <input type="hidden" id="currentpage" value="1">
    </body>
</html>



